<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>12306</title>
		<style type="text/css">
			#d1 {

				border: 2px solid blue;

				border-top-left-radius: 20px;
				border-top-right-radius: 20px;

				width: 900px;
				height: 500px;

				position: absolute;
				left: 20%;
				top: 10%;

			}

			#d101 {
				border: 2px solid blue;
				
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
				background-color: blueviolet;
				color: white;
			}

			#d103 {
				text-align: center;
			}

			#b1 {
				width: 10%;
				height: 1000%;
				color: wheat;
				background-color: orange;
				margin: auto
			}

			p{
				margin-left: 20%;
			}

			#s1 {
				margin-left: 20px;
			}
			hr{			
			    border:1px dashed navajowhite;			
			    } 
		</style>
	</head>
	<body>
		<div id="d1">

			<div id="d101">
				<span id="s1">账户信息</span>
			</div>

			<form action="" method="GET">
				<input type="hidden" name="country" value="china" />
				<div id="d102">
					<p>
						<label for="uname"><samp style="color: red;">*</samp>用户昵称:</label>
						<input id="uname" type="text" name="root" minlength="6" maxlength="30" pattern="[\u4e00-\u9fa5]{6,30}"
							placeholder="用户名设置成功后不可修改" / required>
						<span style="color: yellowgreen;">6-30位字母、数字或“_”,字母开头</span>
					</p>
					<p>
						<label for="upass"><samp style="color: red;">*</samp>登录密码:</label>
						<input id="upass" type="text" name="pass" minlength="6" maxlength="30"  placeholder="6-20位字母、数字或符号" required />
					</p>
					<p>
						<label for="upass2"><samp style="color: red;">*</samp>确认密码:</label>
						<input id="upass2" type="text" name="pass2" minlength="6" maxlength="30" placeholder="再次输入您的登陆密码" required />
					</p>
					<p>
						<samp style="color: red;">*</samp>证件类型:
						<select name="sfz" required>

							<option value="china" selected>中国居民身份证</option>
							<option value="cn-hkt">港澳台居民居住证</option>
							<option value="cn-hk">港澳居民来往内地通行证</option>
							<option value="cn-t">台湾居民来往大陆通行证</option>
							<option value="hz">护照</option>
							<option value="wgr">外国人永久居留身份证</option>
						</select>
					</p>
					<p>
						<label for="name2"><samp style="color: red;">*</samp>真实姓名:</label>
						<input id="name2" type="text" name="phone" maxlength="11" placeholder="请输入姓名" required />
						<span style="color: yellowgreen;">姓名填写规则 （用于身份核验，请正确填写）</span>
					</p>
					<p>
						<label for="hm"><samp style="color: red;">*</samp>证件号码:</label>
						<input id="hm" type="text" name="phone" maxlength="11" placeholder="请输入您的证件号码" required />
						<span style="color: yellowgreen;">（用于身份核验，请正确填写）</span>
					</p>
					<p>
						<samp style="color: red;">*</samp>旅客类型:
						<select name="sfz" required>
							<option value="china" selected>成人</option>
							<option value="cn-hkt">儿童</option>
							<option value="cn-hk">学生</option>
							<option value="cn-t">残疾军人、伤残人民警察</option>

						</select>
					</p>
					<hr>
					<p>
						<label for="yx">电子邮箱:</label>
						<input id="yx" type="text" name="phone" maxlength="11" placeholder="请正确填写邮箱地址"  />
					</p>
					<p>
						<label for="sj"><samp style="color: red;">*</samp>手机号码:</label>
						<input id="sj" type="text" name="phone" maxlength="11" placeholder="请输入您的手机号码" required />
						<span style="color: yellowgreen;">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
					</p>
				</div>
								
				<div id="d103">
					<input type="checkbox" name="aihao" required />我已阅读并同意遵守
					<a href="#" style="text-decoration:none">《中国铁路客户服务中心网站服务条款》</a>
					<a href="#" style="text-decoration: none;">《隐私权政策》</a>
					<p></p>
					<button type="submit" style="border-style: none; border-radius:5px;" value="Submit"
						id="b1">下一步</button>
				</div>

			</form>
		</div>
	</body>
</html>